@import "~tracim_frontend_lib/src/css/Variable.styl"

.file
  &__header
    &__editionmode
      display none
    .fa-file-image
      color white
  &__lastversionbtn
    cursor pointer
    margin-inline-end standardSpacing
  &__option
    &__menu
      &__addversion
        padding 8px 15px
        border-width 1px
        border-style solid
        border-radius standardBorderRadius
        background-color transparent
        cursor pointer
        & > i
          margin-inline-start standardSpacing
  &__contentpage
    width 100%
    &__option
      display flex
      justify-content flex-end
    &__content
      &__left
        background-color offWhite
        display flex
        flex-direction column
    &__statewrapper
      overflow-y auto
      position relative
      display flex
      flex-direction column
      flex 1
      &.promptMessageWrapper > .previewcomponent // render .file__contentpage__statewrapper.promptMessageWrapper .file__contentpage__preview
        height calc(100% - 68px) // 100% - file__contentpage__preview__state height
    &__wrapper
      width 40%
      height calc(100% - 150px) // margin + height of header and option
      overflow-Y auto
      .timeline
        &__messagelist
          min-height 300px
    &__dropzone
      padding-top 20px
      padding-inline-end 15px
      padding-bottom 20px
      padding-inline-start 20px
      &__btn
        display flex
        justify-content flex-end
        &__cancel
          margin-inline-end 15px
    &__rightContent
      width 100%
    &__messagelist
      padding 0 standardSpacing standardSpacing
  &__previewVideo
    position fixed
    top 0
    left 0
    display flex
    justify-content center
    flex-direction column
    align-items center
    width 100%
    height 100%
    color offWhite
    line-height 28px
    background-color rgba(10, 10, 10, 0.9)
    opacity 0
    transition opacity 0.3s
    z-index 1000
    & > video
      max-width 100%
      max-height calc(100% - 160px) // INFO - GB - 2022-08-23 - 160px is the warning message height
    &.open
      opacity 1
    &__error
      margin 25px 15px
      font-weight bold
      font-style italic

.activeEditionTitle
  .file__header
    &__editionmode
      display block
    &__title
      display none

.activeEditionDesc
  .file__contentpage__preview__content__detail
    &__description
      &__editiondesc
        display block
    &__btndesc
      display none

// MEDIAQUERIES

@media (min-width: max-xs) and (max-width: max-lg)
  .file
    &__contentpage
      display block
      &__messagelist
        overflow-y visible
      &__content
        &__left
          min-height 60%
        &__right
          min-height 40%
      &__preview
        display flex
        flex-direction column
        width calc(100% - 30px) // 30px => margin
      &__wrapper
        width calc(100% - 30px) // 30px => margin
        .commentArea
          &__simpletext
            display inline-flex
            width 60%
          &__submit
            display inline-flex
            margin standardSpacing 0
            &__btn
              display flex
              margin-inline-start 35px
              &__icon
                margin-inline-start 15px
      &__statewrapper
        padding 0
        height calc(100% - 88px)

@media (max-width: max-xs)
  .file
    &__lastversionbtn
      > span
        display none
      > i
        margin 0
    &__option__menu
      &__addversion
        padding 8px 5px
        & > i
          display none
      &__editBtn
        & > .genericButton__icon
          margin 0
        & > .genericButton__label
          display none
    &__contentpage
      display block
      &__content
        &__left
          width 100%
        &__right
          width 100%
          height 100%
      &__statewrapper
        width 100%
        height auto
      &__wrapper
        width calc(100% - 30px) // 30px => margin
        .commentArea
          &__simpletext
            display inline-flex
            width 60%
            margin-inline-end 0
          &__submit
            display inline-flex
            margin standardSpacing 0
            &__btn
              display flex
              margin-inline-start standardSpacing
              &__icon
                margin-inline-start 15px
